<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>面向对象 Tab</title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./styles/style.css">
  </head>
  <body>
    <div class="tabsbox" id="tab">
      <!-- 标签 -->
      <nav class="firstnav">
        <ul>
          <li class="liactive">
            <span>测试1</span><span class="iconfont icon-close"></span>
          </li>
          <li>
            <span>测试2</span><span class="iconfont icon-close"></span>
          </li>
          <li>
            <span>测试3</span><span class="iconfont icon-close"></span>
          </li>
        </ul>
        <div class="tabadd"><span>+</span></div>
      </nav>
      <!-- 内容 -->
      <div class="tabscon">
        <section class="conactive">测试1</section>
        <section>测试2</section>
        <section>测试3</section>
      </div>
    </div>
    <script src="js/tab-12.3.5.js"></script>
  </body>
</html>